<template>
	<view class="right-side">
		<view class="item" @click="goMoney">
			<image class="money" src="@/static/image/money.png" mode="widthFix"></image>
			<text class="money-text">{{userInfo.coin||0}}</text>
		</view>
		<view class="item" @click="goBoxList">
			<image class="box" src="@/static/image/box.png" mode="widthFix"></image>
			<text class="box-text">盒柜</text>
		</view>
	</view>
</template>
<script>
	export default {
		methods: {
			goBoxList(){
				this.$emit("goBoxList");
			},
			goMoney(){
				this.$emit("goMoney");
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo||{};
			}
		},

	}
</script>

<style lang="scss" scoped>
	.right-side {
		width: 88rpx;
		// height: 253rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 21rpx 0px rgba(218, 218, 218, 0.5);
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		display: flex;
		flex-direction: column;	
		// justify-content: space-between;
		padding: 17rpx 17rpx 34rpx 17rpx;
		box-sizing: border-box;
		position: fixed;
		z-index: 10;
		top: 188rpx;
		right: 0;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.money{
				width: 63rpx;
				height: 63rpx;
				display: inline-block;
			}
			.money-text{
				font-size: 24rpx;
				color: #111111;
				display: inline-block;
				font-weight: 500;
				line-height: 15rpx;
				margin-top: 5rpx;
			}
			.box{
				display: inline-block;
				width: 56rpx;
				height: 44rpx;
			}
			.box-text{
				font-size: 24rpx;
				color: #111111;
				display: inline-block;
				margin-top: 10rpx;
				font-weight: 500;
				line-height: 19rpx;
			}
			&:nth-of-type(2){
				margin-top: 45rpx;
			}
		}
	}
</style>
